<!-- 申请提现 -->
<template>
	<view class="">
		<view class="form">
			<ul>
				<li>
					<text class="key">提现金额</text>
					<input type="digit" v-model="price" placeholder-class="placeholder" placeholder="请填写提现金额"/>
				</li>
				<li>
					<text class="key">手机号码</text>
					<input type="number" v-model="mobile" placeholder-class="placeholder" placeholder="请填写手机号码" maxlength="11"/>
				</li>
				<li>
					<text class="key">真实姓名</text>
					<input type="text" v-model="real_name" placeholder-class="placeholder" placeholder="必须与银行账户名对应"/>
				</li>
				<li>
					<text class="key">收款方式</text>
					<input type="text" v-model="status" @click="show" disabled/>
				</li>
				<block v-if="status=='银行'">
					<li>
						<text class="key">收款银行</text>
						<input type="text" v-model="bankname" placeholder-class="placeholder" placeholder="请填写银行名称"/>
					</li>
					<li>
						<text class="key">收款账户</text>
						<input type="number" v-model="banknum" placeholder-class="placeholder" placeholder="请填写银行账号" maxlength="11"/>
					</li>
				</block>
				<li v-else>
					<text class="key">支付宝账户</text>
					<input type="number" v-model="zfnum" placeholder-class="placeholder" placeholder="请填写支付宝账号" maxlength="11"/>
				</li>
			</ul>
		</view>
		<view class="but" @click="onSubmit">
			<text>提交</text>
		</view>
		<popup-layer ref="popupRef" :direction="'top'">
			<view class="box">
				<view class="val" @click="close(1)">银行</view>
				<view class="val" @click="close(2)">支付宝</view>
				<view class="val" style="border-top: 14rpx solid #f1f1f1;" @click="close">取消</view>
			</view>
		</popup-layer>
	</view>
</template>

<script>
	const app = getApp();
	const request = require('../../utils/request');
	import popupLayer from '@/components/popup-layer/popup-layer.vue';
	export default {
		components:{
			popupLayer
		},
		data() {
			return {
				status:'银行',
				boolShow:false,
				
				price:'',
				mobile:'',
				real_name:'',
				bankname:'',
				banknum:'',
				type:2,
				zfnum:'',
				txtype:1
			}
		},
		onLoad(e) {
			console.log(e.type);
			this.txtype = e.type==1?2:1
		},
		methods: {
			show(){
				this.$refs.popupRef.show(); // 或者 boolShow = rue
			},
			close(e){
				if(e==1){
					this.status = '银行';
					this.type = 2;
					
				}else if(e==2){
					this.status = '支付宝';
					this.type = 1;
				}
				this.$refs.popupRef.close();// 或者 boolShow = false
			},
			but(){
				uni.navigateTo({
					url:'/pages/my/withdrawal'
				})
			},
			onSubmit(){
				var that = this;
				//网络请求
				request(app.globalData.api_url+'/v1/user/tixian', 'POST', {
					price:that.price,
					mobile:that.mobile,
					real_name:that.real_name,
					bankname:that.bankname,
					banknum:that.type==1?'':that.banknum,
					type:that.type,
					zfnum:that.type==2?'':that.zfnum,
					txtype:that.txtype
				}).then((res) => {
					if(res.data.code == 0){
						console.log(res);
						uni.navigateBack();
					}else{
						uni.showToast({
							title:res.data.msg,
							icon:'none'
						});
						app.is_login_check(res.data);
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	page{
		background-color: #f7f7f7;
	}
	.form{
		margin: 30rpx;
		border-radius: 10rpx;
		background-color: #fff;
		ul{
			li{
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2rpx solid #f1f1f1;
				padding:30rpx 0;
				margin: 0 30rpx;
				.key{
					font-size: 28rpx;
					color:#333;
					line-height: 28rpx;
				}
				input{
					color: #333;
					font-size: 28rpx;
					line-height: 28rpx;
					text-align: right;
				}
				.placeholder{
					font-size: 28rpx;
					line-height: 28rpx;
				}
			}
		}
	}
	::v-deep{
		.popup-content{
			border-top-left-radius:30rpx;
			border-top-right-radius:30rpx;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			box-sizing: content-box;
		}
	} 
	.box{
		.val{
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-bottom: 2rpx solid #f1f1f1;
			font-size: 28rpx;
		}
	}
	.but{
		background-color: #38c763;
		width: 90%;
		height: 100rpx;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 40rpx;
		left: 50%;
		transform: translate(-50%,0);
		text{
			color: #fff;
			font-size: 30rpx;
			line-height: 30rpx;
			letter-spacing: 2rpx;
		}
	}
</style>